<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.详聊v-for</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
    <style>
      h4 {
        margin: 0 0;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h2>v-for遍历数组</h2>
      <h4 v-for="(game,index) in arr" :key="game.id">{{game.name}}---{{index}}</h4>
      <hr>
      <h2>v-for遍历对象</h2>
      <h4 v-for="(zhi,jian,index) in obj" :key="jian">{{jian}}：{{zhi}}，{{index}}</h4>
      <hr>
      <h2>v-for遍历字符串</h2>
      <h4 v-for="(char,index) in str" :key="index">{{char}} ----- {{index}}</h4>
      <hr>
      <h2>v-for遍历指定次数（遍历数字）</h2>
      <h4 v-for="(number,index,c,d) in n">{{number}} --- {{index}}</h4>
      <br>
      <br>
      <h2>v-for很健壮，遍历如下内容，都不会报错</h2>
      <h4 v-for="(a,b,c,d) in true">{{a}}</h4>
      <h4 v-for="(a,b,c,d) in null">{{a}}</h4>
      <h4 v-for="(a,b,c,d) in undefined">{{a}}</h4>
      <h4 v-for="(a,b,c,d) in ''">{{a}}</h4>
      <h4 v-for="(a,b,c,d) in []">{{a}}</h4>
      
      <!-- 下面这行受不了 -->
      <!-- <h4 v-for="(a,b,c,d) in NaN">{{a}}</h4> -->

    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          arr:[
            {id:'ashgdy01',name:'《部落冲突》'},
            {id:'ashgdy02',name:'《王者荣耀》'},
            {id:'ashgdy03',name:'《红色警戒》'},
            {id:'ashgdy04',name:'《跑跑卡丁》'}
          ],
          obj:{
            name:'旺财',
            age:6,
            color:'黑色'
          },
          str:'今天你想我了没',
          n:9,
        }
      })
    </script>
  </body>
</html>